<div class="tab-wrap">
    <#if isUnlocked == false>
        <div class="lock-tips">
            <div class="title">
                Below is a sample report. This feature only available to <em>PLUS</em> version or higher.
                <br>
                Please use credit to unlock the report or upgrade your membership.
            </div>
            <div class="right">
                <button class="gd-btn btn-default">Unlock</button>
                <button class="gd-btn btn-info">Upgrade</button>
            </div>
        </div>
        <#if isMobile == false>
            <img class="demo-img" src="${request.contextPath}/static/img/ins/Media-Web.png" alt="sample report">
        <#else>
            <img class="demo-img" src="${request.contextPath}/static/img/ins/Media-Mobile.png"
                 srcset="${request.contextPath}/static/img/ins/Media-Mobile@2x.png 2x" alt="sample report">
        </#if>
    <#else>
        <div class="media-tab-wrap">
            <ul class="ana-tab">
                <li class="ana-tab-item" value="0">7 Days</li>
                <li class="ana-tab-item" value="1">15 Days</li>
                <li class="ana-tab-item is-active" value="2">30 Days</li>
            </ul>
        </div>
        <div class="wrap-item">
            <div class="wrap-item__title">
                Media Performance
            </div>
            <div class="quality-wrap">
                <div class="quality-list" id="mediaBaseInfo">
                    <div class="quality-item">
                        <div class="title">
                            Post
                        </div>
                        <div class="sub-title">
                            -
                        </div>
                    </div>

                    <div class="quality-item">
                        <div class="title">
                            Avg Views
                        </div>
                        <div class="sub-title">
                            -
                        </div>
                    </div>

                    <div class="quality-item">
                        <div class="title">
                            Avg Likes
                        </div>
                        <div class="sub-title">
                            -
                        </div>
                    </div>

                    <div class="quality-item">
                        <div class="title">
                            Avg Reviews
                        </div>
                        <div class="sub-title">
                            -
                        </div>
                    </div>

                    <div class="quality-item">
                        <div class="title">
                            Age ER
                        </div>
                        <div class="sub-title">
                            -
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wrap-item">
            <div class="wrap-item__title">
                Media List
                <div class="title__right" id="mediaSelect">
                    <div class="gd-select adstatus-select gd-init-select" id="mediaStatusSelect" tabindex="0" role="select">
                        <div class="gd-select-title">
                            <div class="label">Hottest</div>
                            <i class="iconfont icondown1"></i>
                        </div>
                        <div class="gd-select-wrap">
                            <ul>
                                <li class="gd-option is-active" data-index="0" role="option" aria-selected="true">
                                    Hottest
                                </li>
                                <li class="gd-option" data-index="1" role="option" aria-selected="false">Latest</li>
                            </ul>
                        </div>
                    </div>

                    <div class="right" id="mediaRight">
                        Filter
                        <i class="iconfont iconfilter-list"></i>
                    </div>

                </div>
            </div>
            <div class="mediaBrand-warp" id="mediaBrandPostWrap">
                <div class="media-list">
                    <ul class="tag-list" id="mediaBrandCategoryList">
                        <li class="tag-item is-active" value="0" >All</li>
                        <li class="tag-item" value="1" >Image</li>
                        <li class="tag-item" value="2" >Video</li>
                        <li class="tag-item" value="3" >Reels</li>
                        <li class="tag-item" value="4" >IGTV</li>
                    </ul>
                    <div class="media-middle">
                        <p class="media-title">Other Info:</p>

                        <div class="gd-checkbox-group" id="mediaCheck">
                            <div class="gd-checkbox">
                                <input type="checkbox">
                                <div class="label input-margin" value="0">Sponsored</div>
                            </div>
                            <div class="gd-checkbox">
                                <input type="checkbox">
                                <div class="label input-margin" value="1">Business Tagging</div>
                            </div>
                            <div class="gd-checkbox">
                                <input type="checkbox">
                                <div class="label input-margin" value="2">Product Tagging</div>
                            </div>
                        </div>

                    </div>
                    <div class="title__right">
                        <ul  id="mediaPost">
                            <li class="is-active">Hottest</li>
                            <li>Latest</li>
                        </ul>
                    </div>
                </div>

                <div class="brand-post-list" id="mediaBrandPostList">
                    <div class="brand-post-item">
                        <div class="brand-image">
                            <img class="brand-avatar" src="" alt="">
                            <div class="icon">
                                <i class="iconfont iconimage-fill"></i>
                            </div>
                            <div class="hot">
                                <i class="iconfont iconhuo"></i>
                                <p class="hot-lable">95.2</p>
                                <p class="hot-type">Sponsored</p>
                            </div>
                        </div>
                        <div class="brand-data">
                            <div class="brand-data-item">
                                <div class="label">Likes</div>
                                <b>909</b>
                            </div>
                            <div class="line"></div>
                            <div class="brand-data-item">
                                <div class="label">Reviews</div>
                                <b>10.5K</b>
                            </div>
                            <div class="line"></div>
                            <div class="brand-data-item">
                                <div class="label">ER</div>
                                <b>80%</b>
                            </div>
                        </div>
                    </div>
                    <div class="brand-post-item">
                        <div class="brand-image">
                            <img class="brand-avatar" src="" alt="">
                            <div class="icon">
                                <i class="iconfont iconimage-fill"></i>
                            </div>
                            <div class="hot">
                                <i class="iconfont iconhuo"></i>
                                <p class="hot-lable">95.2</p>
                                <p class="hot-type">Sponsored</p>
                            </div>
                        </div>
                        <div class="brand-data">
                            <div class="brand-data-item">
                                <div class="label">Likes</div>
                                <b>909</b>
                            </div>
                            <div class="line"></div>
                            <div class="brand-data-item">
                                <div class="label">Reviews</div>
                                <b>10.5K</b>
                            </div>
                            <div class="line"></div>
                            <div class="brand-data-item">
                                <div class="label">ER</div>
                                <b>80%</b>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wrap-footer" id="mediaView">View More</div>
            </div>
        </div>
        <div class="filter" id="mediaFilter" style="display: none">
            <div class="filter-body">
                <div class="search-item">
                    <div class="content">
                        <div class="gd-btn-select select-item">
                            <div class="label" id="media-lable">Media Type</div>
                            <ul class="btn-select" data-param-key="type">
                                <li class="btn-select-item is-active" value="0">All</li>
                                <li class="btn-select-item" value="1">Image</li>
                                <li class="btn-select-item" value="2">Video</li>
                                <li class="btn-select-item" value="3">Reels</li>
                                <li class="btn-select-item" value="4">IGTV</li>
                            </ul>
                        </div>
                        <div class="select-item">
                            <div class="select-title">Other Info</div>
                            <div class="gd-checkbox-group vertical" id="mediaAccount">
                                <div class="gd-checkbox" value="0"><input type="checkbox">
                                    <div class="label">Sponsored</div>
                                </div>
                                <div class="gd-checkbox" value="1"><input type="checkbox">
                                    <div class="label">Business Tagging</div>
                                </div>
                                <div class="gd-checkbox" value="2"><input type="checkbox">
                                    <div class="label">Product Tagging</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="filter-footer">
                <button class="gd-btn btn-default" id="mediaClear">Clear</button>
                <button class="gd-btn btn-info" id="mediaSearch">Search</button>
            </div>
        </div>
    </#if>
</div>
<script type="module">
    import { openDetail } from "/static/js/common.js"
    import { initCheckboxGroup } from '/static/js/gd-ui/checkbox/group.js'
    import { Select } from '/static/js/gd-ui/select/index.es.js'

    let mediagoryName = ''
    let mediaBrandPostCateGory = ''
    let mediaBrandPage = 1
    let mediaBrandType = 0
    let mediaBrandPostPage = 1
    let mediaBrandPostType = 0
    let mediaDayType = 2
    let mediaSponsored = 0
    let mediaBusiness = 0
    let mediaProduct = 0

    <#if isUnlocked == true>
    initMedia()
    </#if>

    function initMedia() {
        initCheckboxGroup()
        initMediaEvent()
        //获取帖子统计信息
        getMediaGobal()
        //获取Media图片组
        getAdMediaPostList()
    }

    function initMediaEvent() {
        //添加Lastest/Hottest点击事件
        const e = document.querySelectorAll("#mediaPost li")
        e.forEach((item , i) => {
            item.addEventListener('click',e => {
                if ((i) !== mediaBrandPostType){
                    item.parentElement.querySelector('.is-active').classList.remove('is-active')
                    item.classList.add('is-active')
                    mediaBrandPostType = i
                    mediaBrandPostPage = 1
                    getAdMediaPostList()
                }
            })
        })
        //增加Viewmore点击事件
        document.getElementById('mediaView').addEventListener('click', e => {
            getAdMediaPostList()
        })

        //增加图片种类选择点击事件
        initMediaWrapEvent()
        //添加media时间切换点击事件
        initmediaDayTypeEvent()
        //添加多选框点击事件
        initMediaCheckbox()
        //添加移动端种类选择点击事件
        initMediaMobileEvent()
        //添加移动端右拉框多选框点击事件
        initMediaMobileCheck()
        //添加清除按钮点击事件
        initClickClear()
        //添加侧边栏展开点击事件
        initClickRight()
        //添加确认按钮点击事件
        initClickSearch()
    }

    function initMediaWrapEvent(){
        //pc端点击事件
        const e = document.querySelectorAll(".tag-item")
        e.forEach((item , a) => {
            item.addEventListener('click',e => {
                if ((a) !== mediaBrandType){
                    item.parentElement.querySelector('.is-active').classList.remove('is-active')
                    item.classList.add('is-active')
                    mediaBrandType = item.getAttribute('value')
                    mediaBrandPostPage = 1
                    getAdMediaPostList()
                }
            })
        })

        //移动端点击事件
        let select = new Select()
        select.setElement([document.getElementById('mediaStatusSelect')])
        select.setSelectedEvent(e => {
            mediaBrandPostType = +e.target.getAttribute('data-index')
            mediaBrandPostPage = 1
            getAdMediaPostList()
        })
        select.init()
    }

    function initmediaDayTypeEvent(){
        const mediaTabs = document.querySelectorAll('.ana-tab .ana-tab-item')
        mediaTabs.forEach(item => {
            item.addEventListener('click', () => {
                if(!item.classList.contains('is-active')) {
                    item.parentElement.querySelector('.is-active').classList.remove('is-active')
                    item.classList.add('is-active')
                    mediaDayType = item.getAttribute('value')
                    mediaBrandPostPage = 1
                    getAdMediaPostList()
                    getMediaGobal()
                }
            })
        })
    }

    function initMediaCheckbox(){
        const mediaCheck = document.querySelectorAll('#mediaCheck .gd-checkbox')
        mediaCheck.forEach(item => {
            item.addEventListener('click', e => {
                const checkBox = item.querySelector("input")
                const checkEd = item.querySelector('.label')
                const checkValue = +checkEd.getAttribute('value')
                switch (checkValue){
                    case 0 :
                        mediaSponsored = +checkBox.checked
                        break
                    case 1 :
                        mediaBusiness = +checkBox.checked
                        break
                    case 2 :
                        mediaProduct = +checkBox.checked
                        break
                }
                mediaBrandPostPage = 1
                getAdMediaPostList()
                mediaBrandPostPage = 1
            })
        })
    }

    function getMediaGobal() {
        const e = document.getElementById('mediaBaseInfo')
        e.showLoading()
        const url = getEncodeUrl('/ins/blogger/media/st/${blogger.uid?c}', {
            dayType: mediaDayType,
        })
        _axios.get(url).then(res => {
            if (res.Code === 200) {
                const mediaGobal = res.Data
                const list = e.querySelectorAll('.sub-title')
                list[0].innerHTML = (mediaGobal.total?numFormat(+mediaGobal.total):'-')
                list[1].innerHTML = (mediaGobal.avgVideoViewCount?numFormat(+mediaGobal.avgVideoViewCount):'-')
                list[2].innerHTML = (mediaGobal.avgLike?numFormat(+mediaGobal.avgLike):'-')
                list[3].innerHTML = (mediaGobal.avgComment?numFormat(+mediaGobal.avgComment):'-')
                list[4].innerHTML = (mediaGobal.avgEr?(numFormat(+mediaGobal.avgEr)+ '%'):'-')
            }
            e.hideLoading()
        })
    }

    function getAdMediaPostList(){
        const e = document.getElementById('mediaBrandPostList')
        e.showLoading()
        const url = getEncodeUrl('/ins/blogger/media/${blogger.uid?c}',{
            page: mediaBrandPostPage,
            sponsored: mediaSponsored,
            business: mediaBusiness,
            product: mediaProduct,
            sort: mediaBrandPostType,
            mediaType: mediaBrandType,
            dayType: mediaDayType,
            pageSize: 8
        })
        _axios.get(url).then(res => {
            if(res.Code === 200){
                let str = ''
                const viewMoreMedia = e.nextElementSibling
                if(res.Data.list.length < 8) {
                    viewMoreMedia && viewMoreMedia.hide()
                } else {
                    viewMoreMedia && viewMoreMedia.show()
                }
                if (mediaBrandPostPage > 1) {
                    str += e.innerHTML
                }
                res.Data.list.forEach(item => {
                    str += '<div class="brand-post-item" data-id="' + item.id + '" data-shortcode="'+ item.shortcode +'">' +
                        '<div class="brand-image">' +
                        '<img class="brand-avatar" src="' + getImage(item.displayUrl, IMAGE_TYPE.MEDIA, IMAGE_SIZE.MIDDLE) + '" alt="${blogger.fullName?js_string}"> '
                        switch (item.mediaType){
                            case 1:
                                str += '<div class="icon">' +
                                    '<i class="iconfont iconMultiPhoto-16px">' +
                                    '</i>' +
                                    '</div>'
                                break
                            case 2:
                                str += '<div class="icon">' +
                                    '<i class="iconfont iconinsvideo-16px">' +
                                    '</i>' +
                                    '</div>'
                                break
                            case 3:
                                str += '<div class="icon">' +
                                    '<i class="iconfont iconinstagram-reels">' +
                                    '</i>' +
                                    '</div>'
                                break
                            case 4:
                                str += '<div class="icon">' +
                                    '<i class="iconfont iconigtv">' +
                                    '</i>' +
                                    '</div>'
                                break

                        }
                    str += '<div class="hot">'+
                        '<i class="iconfont iconhuo"></i>'+
                        '<p class="hot-lable">' + numFormat(+item.score) + '</p>'
                    if(item.isSponsored){
                        str += '<p class="hot-type">Sponsored</p>'
                    }
                    str += '</div>'+
                        '</div>'
                    str += '<div class="brand-data">' +
                        '<div class="brand-data-item">'
                    str += '<div class="label">Reviews</div>' +
                        '<b>' + numFormat(+item.commentCount) + '</b>' +
                        '</div>' +
                        '<div class="line"></div>' +
                        '<div class="brand-data-item">' +
                        '<div class="label">Likes</div>' +
                        '<b>' + numFormat(+item.likeCount) + '</b>' +
                        '</div>' +
                        '<div class="line"></div>' +
                        '<div class="brand-data-item">' +
                        '<div class="label">ER</div>' +
                        '<b>' + numFormat(+item.er * 100) + '%</b>'+
                        '</div>' +
                        '</div>' +
                        '</div></a>'
                })
                e.innerHTML = str
                initClickImage()
                mediaBrandPostPage++
                if (res.Data.totalRow === 0) {
                    showNoDataImg(e)
                }
            }
            e.hideLoading()
        })
    }

    function initMediaMobileEvent(){
        const e = document.querySelectorAll('.select-item .btn-select-item')
        e.forEach((item , f) => {
            item.addEventListener('click',e => {
                if ((f) !== mediaBrandType){
                    item.parentElement.querySelector('.is-active').classList.remove('is-active')
                    item.classList.add('is-active')
                    mediaBrandType = item.getAttribute('value')
                }
            })
        })
    }

    function initMediaMobileCheck(){
        const mobileCheck = document.querySelectorAll('#mediaAccount .gd-checkbox')
        mobileCheck.forEach(item => {
            item.addEventListener('click', e => {
                const mobileValue = +item.getAttribute('value')
                const mobileChecked = item.querySelector('input[type="checkbox"]')
                switch (mobileValue){
                    case 0 :
                        mediaSponsored = +mobileChecked.checked
                        break
                    case 1 :
                        mediaBusiness = +mobileChecked.checked
                        break
                    case 2 :
                        mediaProduct = +mobileChecked.checked
                        break
                }
            })
        })
    }

    function initClickClear(){
        const e = document.getElementById('mediaClear')
        e.addEventListener('click', () => {
            document.querySelectorAll('.select-item .btn-select-item').forEach(item => {
                item.classList.remove('is-active')
            })
            document.querySelectorAll('.select-item .btn-select-item:first-child').forEach(item => {
                item.classList.add('is-active')
            })
            document.querySelectorAll('#mediaAccount .gd-checkbox input[type="checkbox"]').forEach(item => {
                item.checked = false
            })
        })
    }

    function initClickRight(){
        const e = document.getElementById('mediaRight')
        e.addEventListener('click', showMediaFilter)
    }
    function showMediaFilter() {
        const filter = document.getElementById('mediaFilter')
        const parentTop = getElementPosition(document.querySelector('.account-wrap')).top
        const scrollTop = getScroll().top
        const filterTop = scrollTop - parentTop
        filter.style.top = filterTop + 'px'
        if(gugeeOS.isIPhone) {
            filter.style.height = 'calc(100vh - 115px)'
        }
        showMask({
            event: () => {
                hideMediaFilter()
            }
        })
        filter.show('flex')
    }
    function hideMediaFilter() {
        const filter = document.getElementById('mediaFilter')
        filter.hide()
        hideMask()
    }
    function initClickSearch(){
        const e = document.getElementById('mediaSearch')
        e.addEventListener('click', () => {
            mediaBrandPostPage = 1
            getAdMediaPostList()
            hideMediaFilter()
        })
    }
    function initClickImage(){
        const elements = document.querySelectorAll('.brand-post-item')
        elements.forEach(item => {
            item.addEventListener('click', () => {
                const id = item.getAttribute('data-id')
                const shortcode =item.getAttribute('data-shortcode')
                openDetail(id,shortcode)
            })
        })
    }
</script>
